<template>
  <div>
    <div class="box">
      <!-- 筛选查询 -->
      <div class="list">
        <div>
          <img
            class="list-img"
            src="../../../assets/images/搜索小.png"
            alt=""
          />
        </div>
        <div>
          筛选查询
        </div>
      </div>
      <div class="search">
        <div class="search">
          <div class="whead">
            <div class="left">用户ID :</div>
            <el-input
              v-model="input"
              @change="btnchange(input)"
              style="width: 240px;"
              placeholder="用户ID"
            >
            </el-input>
          </div>
          <div class="whead">
            <div class="left">用户手机号 :</div>
            <el-input
              v-model="phone"
              @change="phoneChange(phone)"
              style="width: 240px;"
              placeholder="用户手机号"
            >
            </el-input>
          </div>
          <div class="whead">
            <div class="left">注册时间 :</div>
            <el-date-picker
              v-model="timeInfo"
              @change="timeChange(timeInfo)"
              style="width: 240px;"
              prefix-icon="el-icon-time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </div>
        </div>

        <div style="display: flex; height: 40px; margin-left: 100px;">
          <el-button type="primary" @click="btnSearch">搜索</el-button>
          <el-button
            v-permission="['sysUser:list:export']"
            type="primary"
            @click="addUserClick"
            >添加用户
          </el-button>
          <!-- <el-button   style='float:right;margin:7px 10px 0 0 '
                    size="mini" type="info" icon="el-icon-document" @click='exportToExcel'>导出xlsx文件</el-button> -->
        </div>
      </div>
      <!-- 数据列表 -->
      <div class="list">
        <div>
          <img
            class="list-img"
            src="../../../assets/images/查询数据列表.png"
            alt=""
          />
        </div>
        <div>
          数据列表
        </div>
      </div>
      <div>
        <!-- 表格 -->
        <el-table
          :data="arrdata"
          style="width: 100%"
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
          border
        >
          <el-table-column prop="userId" label="用户ID"></el-table-column>
          <el-table-column prop="nickName" label="用户昵称"></el-table-column>
          <el-table-column prop="phoneNumber" label="手机号"></el-table-column>
          <el-table-column
            prop="registerDate"
            label="注册时间"
          ></el-table-column>
          <el-table-column
            prop="totalAmount"
            label="消费金额"
          ></el-table-column>
          <el-table-column
            prop="fishIntegral"
            label="可用鱼米"
          ></el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                @click="examineClick(scope.row.userId)"
                type="primary"
                size="small"
                >查看</el-button
              >

              <div
                style="display: flex; justify-content: center; margin: 0 10px;"
              >
                <el-button
                  v-permission="['sysUser:info:edit']"
                  @click="handleClick(scope.row.userId)"
                  type="primary"
                  size="small"
                  >编辑</el-button
                >
                <div v-permission="['sysUser:info:enable']">
                  <el-button
                    style="margin: 0 10px;"
                    @click="userStatusClick(scope.row.userId, 1)"
                    v-if="scope.row.enableStatus == 0"
                    type="info"
                    size="small"
                    >禁用</el-button
                  >
                  <el-button
                    @click="userStatusClick(scope.row.userId, 0)"
                    v-if="scope.row.enableStatus == 1"
                    type="warning"
                    size="small"
                    >解除禁用</el-button
                  >
                </div>

                <el-button
                  v-permission="['sysUser:info:delete']"
                  @click="removeClick(scope.row.userId)"
                  type="danger"
                  size="small"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="block" style="margin-top:15px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            align="center"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import CommonTable from "@/components/Table/index.vue";
import { editSysUser, userStatus, removeById } from "@/api/user";
export default {
  data() {
    return {
      input: "", //搜索
      phone: "", //手机号搜索
      timeInfo: "", //日期选择
      loading: false,
      selectedAssetsList: [], // 该数组对象
      assetsUidList: [], // 下标值
      currentPage: 1, //当前页数
      pageSize: 10, //每页条数
      total: 0, //总条目数
      arrdata: [],
      disableBeginDate: "", //禁用开始时间
      disableEndDate: "", //禁用结束时间
      enableStatus: 0, //启用状态 0.启用 1.禁用
      phoneNumber: "", //手机号
      registerBeginDate: "", //注册日期开始
      registerEndDate: "", //注册日期结束
      userId: "", //用户ID
      userstatus: true
    };
  },
  created() {
    this.editSysUser(this.pageSize, this.currentPage);
  },
  methods: {
    // 用户列表
    async editSysUser(limit, page) {
      let data = {
        limit: this.pageSize,
        page: this.currentPage,
        disableBeginDate: this.disableBeginDate,
        disableEndDate: this.disableEndDate,
        enableStatus: this.enableStatus,
        phoneNumber: this.phoneNumber,
        registerBeginDate: this.registerBeginDate,
        registerEndDate: this.registerEndDate,
        userId: this.userId
      };
      let result = await editSysUser(data);
      if (result.code == 0) {
        this.arrdata = result.data.records;
        this.pageSize = result.data.limit;
        this.total = result.data.total;
      }
    },
    // 查看用户
    examineClick(e) {
      this.$router.push({ path: "/examine", query: { e } });
    }, // 删除用户
    async removeClick(e) {
      this.$confirm("确定要删除此用户吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(async () => {
          let data = {
            userId: e
          };
          let result = await removeById(data);
          if (result.code == 0) {
            this.editSysUser(this.pageSize, this.currentPage);
            this.$message({
              type: "success",
              message: result.message
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 修改状态
    userStatusClick(e, index) {
      this.$confirm(
        index == 1 ? "确定要标记为禁用吗？" : "确定解除禁用吗",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true
        }
      )
        .then(async () => {
          let data = {
            userId: e,
            enableStatus: index
          };
          let result = await userStatus(data);
          if (result.code == 0) {
            this.editSysUser(this.pageSize, this.currentPage);
            this.$message({
              type: "success",
              message: result.message
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 编辑页面
    handleClick(e) {
      let userId = e;
      this.$router.push({ path: "/userEdit", query: { userId } });
    },
    // 跳转到添加页面
    addUserClick() {
      this.$router.push("/addUser");
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.editSysUser(this.pageSize, this.currentPage);
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.editSysUser(this.pageSize, this.currentPage);
    },
    //  搜索用户ID
    btnchange(e) {
      this.userId = e;
      this.editSysUser(this.pageSize, this.currentPage);
    },
    //手机号输入框数据
    phoneChange(e) {
      this.phoneNumber = e;
      this.editSysUser(this.pageSize, this.currentPage);
    },
    // 时间选择
    timeChange(e) {
      if (e) {
        this.registerBeginDate = e[0];
        this.registerEndDate = e[1];
      } else {
        this.registerBeginDate = "";
        this.registerEndDate = "";
      }

      this.editSysUser(this.pageSize, this.currentPage);
    },
    btnSearch(e) {
      this.editSysUser(this.pageSize, this.currentPage);
    }
  }
};
</script>

<style lang="scss" scoped>
.left {
  margin-right: 10px;
}

.box {
  border: 1px solid #ccc;
  width: 98%;
  margin: 10px auto;
}

.list {
  display: flex;
  align-items: center;
  padding-left: 20px;
  height: 50px;
  background-color: #f3f3f3;
  color: #666;

  .list-img {
    width: 20px;
    height: 20px;
  }
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #1abc9c !important;
  color: #fff;
}

.search {
  display: flex;
  align-items: center;
  height: 80px;
  line-height: 80px;
  margin: 0 20px;
}

.whead {
  width: 400px;
  display: -webkit-box;
}
::v-deep .el-table .cell {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 23px;
  padding-right: 10px;
  display: flex;
  margin: 0 10px;
  text-align: center;
}
</style>
